<template>

<div>


  <el-card class="filter-container" shadow="never">
    <div>
      <i class="el-icon-search"></i>
      <span>筛选搜索</span>
      <el-button
        style="float: right"
        type="primary"
        @click="queryList()"
        size="small">
        查询结果
      </el-button>
      <el-button
        style="float: right;margin-right: 15px"
        size="small"
        @click="handleResetSearch()">
        重置
      </el-button>
    </div>
    <div style="margin-top: 15px">
      <el-form :inline="true"  size="small" v-model="queryForm" label-width="140px">
        <el-form-item label="输入搜索：">
          <el-input style="width: 203px" v-model="queryForm.spuName"  placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类：">
          <el-select v-model="queryForm.spuTypeId" placeholder="请选择商品类型" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in this.productCateOptions" :key="index" :label="item.kindsName"
                       :value="item.kindsId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="商品品牌：">
          <el-select v-model="queryForm.spuBrandId" placeholder="请选择品牌" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in brandOptions" :key="item.spuBrandId" :label="item.spuBrandName"
                       :value="item.spuBrandId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-select v-model="queryForm.orderId" clearable placeholder="请选择">
            <el-option
              v-for="item in orderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="queryForm.spuStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in statusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </el-card>


  <el-card class="box-card">
    <el-button
      class="btn-add"
      @click="handleAddProduct()"
      size="mini">
      添加
    </el-button>
  </el-card>

  <el-table ref="productTable"
            style="width: 100%"
            :data="spuTable"
            border>
    <el-table-column type="selection" width="60" align="center"></el-table-column>
    <el-table-column label="商品编号" width="100" prop="spuId" align="center">
    </el-table-column>
    <el-table-column label="商品名称" width="100" prop="spuName" align="center">
    </el-table-column>
    <el-table-column label="商品主图" width="120" prop="spuImg.img" align="center">
      <template slot-scope="scope"><img style="height: 80px" :src="scope.row.spuImg.img"></template>
    </el-table-column>
    <el-table-column label="商品分类" width="100" prop="kinds.kindsName" align="center">
    </el-table-column>
    <el-table-column label="品牌" width="100" prop="spuBrand.spuBrandName" align="center">
    </el-table-column>
    <el-table-column label="商品市场价" width="100" prop="spuMoney" align="center">
    </el-table-column>
    <el-table-column label="所属店铺" width="100" prop="merchant.merchantName" align="center">
    </el-table-column>
    <el-table-column label="商品收藏数量" width="100" prop="spuCollectNum" align="center">
    </el-table-column>
    <el-table-column label="商品评论数量" width="100" prop="spuCommentNum" align="center">
    </el-table-column>
    <el-table-column label="商品销量" width="100" prop="spuSaleNum" align="center">
    </el-table-column>
    <el-table-column label="商品状态" :formatter="statusFormatter" width="100" prop="spuStatus" align="center">
    </el-table-column>
    <el-table-column label="操作" width="160" align="center">
      <template slot-scope="scope">
        <p>
          <el-button
            size="mini"
            @click="handleShowProduct(scope.$index, scope.row)">查看
          </el-button>
        </p>
        <p>
          <el-button
            size="mini"
            @click="handleUpdateProduct(scope.$index, scope.row)">编辑
          </el-button>
        </p>
        <p>
          <el-button
            size="mini"
            v-show="scope.row.spuStatus==0"
            @click="handleExamine(scope.$index, scope.row)">审核
          </el-button>
          <el-button
            size="mini"
            v-show="scope.row.spuStatus==1"
            @click="handleExamine(scope.$index, scope.row)">审核
          </el-button>
          <el-button
            size="mini"
            v-show="scope.row.spuStatus==2"
            @click="handleExamine(scope.$index, scope.row)">下架
          </el-button>
          <el-button
            size="mini"
            v-show="scope.row.spuStatus==3"
            @click="handleExamine(scope.$index, scope.row)">上架
          </el-button>

        </p>
        <p>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteExamine(scope.$index, scope.row)">删除
          </el-button>
        </p>
      </template>
    </el-table-column>
  </el-table>

  <!--查看详细信息的弹出框-->
  <el-dialog :visible.sync="spuVisiable" title="设置商品参数">
    <el-form
      ref="attributeForm"
      :model="spuForm"
      status-icon
      label-position="left"
      label-width="100px"
      style="width: 700px; margin-left:50px;">
      <el-form-item label="商品编号" prop="spuId">
        <el-input v-model="spuForm.spuId"/>
      </el-form-item>
      <el-form-item label="商品名称" prop="spuName">
        <el-input v-model="spuForm.spuName"/>
      </el-form-item>
      <el-form-item label="商品市场价" prop="spuMoney">
        <el-input v-model="spuForm.spuMoney"/>
      </el-form-item>
      <el-form-item label="商品收藏数量" prop="spuCollectNum">
        <el-input v-model="spuForm.spuCollectNum"/>
      </el-form-item>
      <el-form-item label="商品评论数量" prop="spuCommentNum">
        <el-input v-model="spuForm.spuCommentNum"/>
      </el-form-item>
      <el-form-item label="商品销量" prop="spuSaleNum">
        <el-input v-model="spuForm.spuSaleNum"/>
      </el-form-item>
      <el-form-item label="计量" prop="spuMeterage">
        <el-input v-model="spuForm.spuMeterage"/>
      </el-form-item>
      <el-form-item label="重量" prop="spuWeight">
        <el-input v-model="spuForm.spuWeight"/>
      </el-form-item>
      <el-form-item label="商品关键字" prop="spuKeyword">
        <el-input v-model="spuForm.spuKeyword"/>
      </el-form-item>
    <el-form-item label="所属店铺" prop="merchant.merchantName">
        <el-input v-model="spuForm.merchant.merchantName"/>
      </el-form-item>
      <el-form-item label="商品类型" prop="kinds.kindsName">
        <el-input v-model="spuForm.kinds.kindsName"/>
      </el-form-item>
      <el-form-item label="商品品牌" prop="spuBrand.spuBrandName">
        <el-input v-model="spuForm.spuBrand.spuBrandName"/>
      </el-form-item>
      <el-form-item label="服务保证" prop="serviceEnsures">
        <span v-for="service in spuForm.serviceEnsures">
          {{service.serviceEnsureName}}
        </span>
      </el-form-item>
      <el-form-item label="商品主图" prop="spuImg.img">
        <img v-if="spuForm.spuImg.img" :src="spuForm.spuImg.img" class="avatar">
      </el-form-item>
      <el-form-item label="商品相册" prop="spuImgs">
        <img v-for="img in spuForm.spuImgs" v-if="img.img" :src="img.img" class="avatar">
    </el-form-item>
      <el-form-item label="商品规格" prop="skus">
        <el-table
          :data="skuForm"
          style="width: 100%">
          <el-table-column
            prop="skuId"
            label="规格编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="skuName"
            label="规格名称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="sum"
            label="规格库存"
            width="100">
          </el-table-column>
          <el-table-column
            prop="price"
            label="规格单价"
            width="100">
          </el-table-column>
          <el-table-column
            prop="skuImg"
            label="规格图片"
           >
            <template slot-scope="scope">
              <img :src="scope.row.skuImg" class="avatar">
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="商品参数" prop="spuBrand.spuBrandName">
        <el-table
          :data="paramsForm"
          style="width: 100%">
          <el-table-column
            prop="attrName"
            label="参数名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="attrValue"
            label="参数值"
            width="180">
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="商品详情" prop="spuDetail">
        <quill-editor
          class="quill-editor ql-editor"
          v-model="spuForm.spuDetail"
          ref="myQuillEditor"
        ></quill-editor>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="spuVisiable = false">关闭</el-button>
    </div>
  </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "spuList",
    data() {
        return{
          statusOption:[
            {
              value: '0',
              label: '未审核'
            }, {
              value: '1',
              label: '待审核'
            }, {
              value: '2',
              label: '上架'
            }, {
              value: '3',
              label: '下架'
            }
          ],
          orderOptions: [{
            value: '1',
            label: '按价格从高到低'
          }, {
            value: '2',
            label: '按价格从低到高'
          }, {
            value: '3',
            label: '按销量从高到低'
          }, {
            value: '4',
            label: '按销量从低到高'
          }, {
            value: '5',
            label: '按评论数从高到低'
          }, {
            value: '6',
            label: '按评论数从低到高'
          }, {
            value: '7',
            label: '按收藏量从高到低'
          }, {
            value: '8',
            label: '按收藏量从低到高'
          }],
          queryForm:{
            spuName:'',
            spuBrandId:'',
            spuTypeId:'',
            orderId:'',
            spuStatus:''
          },
          paramsForm:[],
          skuForm:[],
          spuVisiable:false,
          spuTable:[],
          spuForm:{
            spuId:'',
            spuName:'',
            spuMoney:'',
            spuStatus:'',
            spuCreateTime:'',
            spuCollectNum:'',
            spuCommentNum:'',
            spuSaleNum:'',
            spuMeterage:'',
            spuWeight:'',
            spuKeyword:'',
            merchant:{
              merchantId:'',
              merchantName:'',
            },
            kinds:{
              kindsId:'',
              kindsName:'',
            },
            spuBrand:{
              spuBrandId:'',
              spuBrandName:''
            },
            serviceEnsures:[],
            spuImg:{
              spuImgId:'',
              img:''
            },
            spuImgs:[],
            skus:[],
            spuBaseAttrs:[],
            spuDetail:'',
            brandOptions:[],
            productCateOptions:[]
          }
      }
    },
    created() {
      this.getList();
      this.getProductCateList();
      this.getBrandList();

    },
    methods: {
      /*审核*/
      handleExamine(index,row){
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spu/examineStatus",
          params:{
            spuId:row.spuId,
            spuStatus: row.spuStatus
          }
        }).then(result => {
          this.getList();
        })
      },
      /*删除*/
      handleDeleteExamine(index,row){
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spu/deleteExamineStatus/"+row.spuId,
        }).then(result => {
          this.getList();
        })
      },
      /*重置*/
      handleResetSearch() {
        this.queryForm.spuTypeId = '';
        this.queryForm.spuBrandId= '';
        this.queryForm.spuTypeId= '';
        this.queryForm.orderId= '';
        this.queryForm.spuStatus='';
      },
      /*搜索*/
      queryList(){
        console.log(this.queryForm)
        this.$axios({
          method: "get",
          url: "http://localhost:8101/spu/composeFind",
          params:{
            spuName:this.queryForm.spuName,
            spuBrandId:this.queryForm.spuBrandId,
            spuTypeId:this.queryForm.spuTypeId,
            orderId:this.queryForm.orderId,
            spuStatus:this.queryForm.spuStatus
          }
        }).then(result => {
         this.spuTable= result.data
        })
      },

      /*商品分类*/
      getProductCateList () {
        this.$axios({
          method: "get",
          url: "http://localhost:8101/kinds/findAllKinds",
        }).then(result => {
          this.productCateOptions = result.data
        })
      },
      /*商品品牌*/
      getBrandList () {
        this.$axios({
          method: "get",
          url: "http://localhost:8101/spuBrand/findAllBrand",
        }).then(result => {
          this.brandOptions = result.data
        })
      },

      statusFormatter(value){
        if(value.spuStatus==0){
          return "未审核"
        }else if(value.spuStatus==1){
          return "待审核"
        }else if(value.spuStatus==2){
          return "已上架"
        }else if(value.spuStatus==3){
          return "已下架"
        }
      },
      getList() {
        this.$axios({
          method: 'get',
          url: 'http://localhost:8101/spu/findAll',
        }).then(result=>{
          console.log(result.data)
          this.spuTable=result.data;

        })
      },
      /*删除*/
      handleDelete(index, row){

      },
      /*编辑*/
      handleUpdateProduct(index,row){
        this.$router.push({path:'./spuUpdate',query:{updateSpuForm:row}});
      },
      /*查看单条*/
      handleShowProduct(index,row){
        this.spuVisiable=true;
        this.spuForm=row;
        this.skuForm=this.spuForm.skus;
        this.paramsForm=this.spuForm.spuBaseAttrs;
      },
      /*添加*/
      handleAddProduct() {
        this.$router.push({path:'./spuAdd'});
      }
    }
  }
</script>

<style scoped>

</style>
